// 宣传册

import Taro from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem, Block } from '@tarojs/components'
import { useEffect, useState } from 'react';
import { useSelector, } from 'react-redux'
import { getManualList } from '../../../service/data'
import './mall.less'

function Manualswiper() {
  const __cardDetail = useSelector(state => state.card.__cardDetail);
  const [switchTabCurrent, setSwitchTabCurrent] = useState(0)
  const [manualList, setManualList] = useState([])

  useEffect(() => {
    if (!__cardDetail) return
    const { departmentId, cardId } = __cardDetail
    const m = async () => {
      const res = await getManualList({ departmentId, accessCardId: cardId })
      setManualList(res)
    }
    m()
  }, [__cardDetail])


  // 图片加载重新设置数据
  function loadImage(e) {
    const { width, height } = e.detail
    const { subIndex } = e.currentTarget.dataset
    const dir = width / height <= 1 ? 'vertical' : 'horizontal'
    const newPath = `/subs/mall/pages/manual-${dir}/manual-${dir}`
    manualList[subIndex].navigatePath = newPath
    setManualList(manualList)
  }


  // swipper 事件
  function bindSwiperChange(e) {
    const { current } = e.detail
    setSwitchTabCurrent(current)
  }

  function handleToDetail() { }

  // 跳转到宣传册详情
  function navigeteToManualDetail() {
    Taro.navigateTo({
      url: `${manualList[switchTabCurrent].navigatePath}?pid=${manualList[switchTabCurrent].catalogId}`
    })
  }
  if (manualList.length === 0) {
    return null
  }

  return (<Block>
    <Swiper
      onChange={bindSwiperChange}
      circular
      className='manual-banner'
      indicatorDots
      indicatorColor='#eeeeee'
      indicatorActiveColor='#E22517'
    >
      {manualList.map((item, index) => {
        return <SwiperItem onClick={handleToDetail} key={this} data-item={item}>
          <View onClick={navigeteToManualDetail} className='manual-image'>
            <Image onLoad={loadImage} data-sub-index={index} className='manual-image_image' mode='aspectFit'
              src={`${item.cover ? item.cover : item.imageUrl}?imageMogr2/auto-orient/thumbnail`}
            ></Image>
          </View>
        </SwiperItem>
      })}
    </Swiper>
    <View class='manual-banner_name'>{manualList[switchTabCurrent].catalogName}</View>
  </Block>)
}
export { Manualswiper }